<template>
  <div class="city-header">
    <div class="header-nav">
      <router-link to="/home">
        <div class="el-icon-arrow-left header-back"></div>
      </router-link>
      <div class="header-text">城市选择</div>
    </div>
    <div class="header-inp">
      <el-input
        class="header-inpt"
        placeholder="请输入城市搜索"
        prefix-icon="el-icon-search"
        v-model="inp"
      ></el-input>
    </div>
    <div class="search-listbox">
    <div class="search-list" v-for="item of list" :key = "item.id" @click="routerToT">{{item.name}} </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: "CityHeader",
  data(){
      return{
          inp:'',
          list:[]
      }
  },
  methods:{
    routerToT(e){
      sessionStorage.setItem("cityName",e.target.innerHTML)
      this.$router.push('/home')
    }
  },
  props:{
    cities:Object
  },
  watch:{
    inp(){
      const result = []
      if(!this.inp){
        this.list= []
        return
      }
      for(let i in this.cities) {
        this.cities[i].forEach(value => {
          if(value.spell.indexOf(this.inp)>-1 ||
          value.name.indexOf(this.inp)> -1){
            result.push(value)
          }
        })
      }
      this.list = result
    }
  }
};
</script>

<style>
.header-nav {
  overflow: hidden;
  background: #00bcd4;
  color: #fff;
}
.header-back {
  float: left;
  padding: 0.1rem;
  color: #fff;
}
.header-text {
  float: left;
  font-size: 0.2rem;
  padding: 0.1rem;
  margin-top: 0.04rem;
  margin-left: 0.8rem;
}
.header-inp {
  background: #00bcd4;
  display: flex;
}
.header-inpt {
  width: 2rem;
  height: 0.3rem;
  margin: 0 0.1rem;
  flex: 1;
  border-radius: 0.04rem;
  padding-bottom: 0.2rem;
}
.search-listbox{
  width: 100%;
  position: absolute;
  background: #fff;
  z-index: 1;
  overflow: hidden;
}
.search-list{
  font-size: .15rem;
  padding: .1rem;
  border-top: .001rem solid #ccc;
}
</style>